import {
    Routes,
    BrowserRouter,
    HashRouter,
    Route,
    Navigate,
    useParams,
    useLocation
} from "react-router-dom";

import Home from './home'
import Projects from "./Projects";
import Me from "./me";

import Login from "./account/login";
import Register from "./account/register";
import { BottomNavigation, BottomNavigationAction } from "@mui/material";
import { makeStyles } from '@mui/styles';
import PersonIcon from '@mui/icons-material/Person';
import DashboardIcon from '@mui/icons-material/Dashboard';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import Font from "./me/font";
import { checkLocation, go, infoKey, useHashRouter } from "./util";
import Toolbar from "./widget/Toolbar";
import Demos from "./demos";
import './app.scss'
import { useEffect } from "react";

const useStyles = makeStyles({
    root: {
        // width: 500,
        position: 'fixed',
        'z-index': 99,
        bottom: 0,
        right: 0,
        left: 0,
    },
});

const menus = [
    {
        name: '简介',
        path: 'synopsis',
        icon: <PersonIcon />,
        page: <Home />
    },
    {
        name: '项目',
        path: 'projects',
        icon: <DashboardIcon />,
        page: <Projects />
    }
];

function newAction(value1) {
    return <BottomNavigationAction label={value1.name}
        value={value1.path}
        icon={value1.icon}
        key={value1.path} />
}

const actions = menus.map(
    (value1 => newAction(value1))
)

const personMenu = {
    name: '会员',
    path: 'me',
    icon: <AccountCircleIcon />,
    page: <Me />
}
const personInfoAction = newAction(personMenu)

export default function App() {
    // const url = new URL(window.location.href)
    // const key = url.searchParams.get('key')

    const userStr = localStorage.getItem(infoKey)
    // const user = JSON.parse(userStr)

    // console.log(window.location)


    useEffect(() => {
        
    }, [])

    if (userStr == null) {
        if (!checkLocation('/login') && !checkLocation('/register') && !checkLocation('/')) {
            go('/login')
            return null
        }
    }

    function getDefaultPath() {
        if (userStr == null) {
            return '/login'
        }
        return '/' + menus[0].path
    }

    function getRoutes() {
        return (
            <Routes>
                <Route path={'/me'}>
                    <Route path={'font'} element={<Font />} />
                    <Route path={''} element={<RoutePage path='me' />} />
                </Route>
                <Route path={'/login'} element={<Login />} />
                <Route path={'/register'} element={<Register />} />
                {/* <Route path={'/demos'} element={<Demos />} /> */}
                {Demos()}
                <Route path={'/:menuPath'} element={<RoutePage />} />
                {/* 空路径去首页 */}
                <Route path={'/'} element={<Navigate replace to={getDefaultPath()} />} />
            </Routes>
        )
    }

    if (useHashRouter) {
        return (
            <div>
                <Toolbar />
                <div>
                    <HashRouter>
                        {getRoutes()}
                    </HashRouter>
                </div>
            </div>
        )
    } else {
        return (
            <div>
                <Toolbar />
                <div>
                    <BrowserRouter>
                        {getRoutes()}
                    </BrowserRouter>
                </div>
            </div>
        );
    }
}

function RoutePage({path}) {
    // let match = useRouteMatch();


    let { menuPath } = useParams();
    console.log(`menuPath = ${menuPath}`)
    console.log(`path = ${path}`)
    return <div>
        <div style={{ padding: 12 }}>
            {(menus.find((value => value.path === menuPath)) ?? personMenu).page}
        </div>
        <BottomNavigation
            value={path || menuPath}
            onChange={(event, newValue) => {
                // window.location.href = useHashRouter? ("#/" + newValue): ("/" + newValue)
                // console.log(match)
                go(newValue)
            }}
            showLabels={true}
            className={useStyles().root}
        >
            {actions}
            {personInfoAction}
        </BottomNavigation>
    </div>
}